<template>
    <div class="content">
        <div class="top">
            <ul>
                <li>
                    <SelectIpt :lists="teamType">
                        <p>团队类型</p>
                    </SelectIpt>
                </li>
                <li>
                    <TextIpt>
                        <p>团队名称</p>
                    </TextIpt>
                </li>
                <li>
                    <TextIpt>
                        <p>创建人</p>
                    </TextIpt>
                </li>
            </ul>
            <div class="btn">
                <BlueBtn>查询</BlueBtn>
                <BlueBtn>新增</BlueBtn>
            </div>
        </div>
        <div class="table">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="序号" width="180"></el-table-column>
                <el-table-column prop="teamName" label="姓名" width="180"></el-table-column>
                <el-table-column prop="teamType" label="类型" width="180"></el-table-column>
                <el-table-column prop="addDate" label="添加时间" width="180"></el-table-column>
                <el-table-column prop="operator" label="添加人" width="180"></el-table-column>
                <el-table-column prop="remarks" label="备注" width="300"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import BlueBtn from '@/components/BlueBtn.vue';
import TextIpt from '@/components/TextIpt.vue';
import SelectIpt from '@/components/SelectIpt.vue';
export default {
    components: {
        TextIpt,
        SelectIpt,
        BlueBtn
    },
    data() {
        return {
            //团队类型
            teamType:['公共区域','楼栋区域'],
            tableData: [{
                id: 1,
                teamName: '张三',
                teamType: "业主",
                addDate: '2019/9/5',
                operator: 'admin',
                remarks: 'XXXXXXXXX'
            },{
                id: 1,
                teamName: '张三',
                teamType: "业主",
                addDate: '2019/9/5',
                operator: 'admin',
                remarks: 'XXXXXXXXX'
            },{
                id: 1,
                teamName: '张三',
                teamType: "业主",
                addDate: '2019/9/5',
                operator: 'admin',
                remarks: 'XXXXXXXXX'
            }]
        }
    },
    methods: {
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
        }
    }
}
</script>

<style scoped>
.table>>>.cell {
    text-align: center;
}

.table {
    padding: 20px 20px 50px;
    background: #fff;
    border-radius: 4px;
    margin-top: 10px;
}

.top p {
    white-space: nowrap;
    font-size: 13px;
    color: #666;
}

.top {
    background: #fff;
    padding: 20px 35px;
    border-radius: 4px;
}

.top li {
    margin-right: 50px;
    margin-bottom: 20px;
}

.top ul {
    display: flex;
}
</style>